<template>
  <div style="display: flex; flex-direction: column; height: 100%;">
    <div class="title-row">
      <span class="title-row-bar" />数据转储总条数
      <el-date-picker
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
      />
    </div>

    <div
      id="dataDump"
      style="width: 100%; height: 300px;margin-top:auto;margin-bottom: auto;"
    />
  </div>
</template>

<script>
import echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
  data() {
    return {
      time: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted() {
    this.dataDumpChart()
  },
  methods: {
    dataDumpChart() {
      var myChart = echarts.init(document.getElementById('dataDump'))

      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: 'pageA',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: [79, 52, 200, 334, 390, 330, 220],
            animationDuration: 6000,
            itemStyle: { color: '#3178F4' }
          },
          {
            name: 'pageB',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: [80, 52, 200, 334, 390, 330, 220],
            animationDuration: 6000,
            itemStyle: { color: '#F7A94E' }
          },
          {
            name: 'pageC',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: [30, 52, 200, 334, 390, 330, 220],
            animationDuration: 6000,
            itemStyle: { color: '#3FDBAB' }
          }
        ]
      })
      const erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById('dataDump'), (element) => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title-row {
  color: #3667d0;
  font-size: 19px;
  font-weight: 900;

  .title-row-bar {
    width: 4px;
    height: 25px;
    background: #3667d0;
    display: inline-block;
    margin-top: 0px;
    vertical-align: top;
    margin-right: 6px;
    margin-left: 4px;
  }
}
</style>
